<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="referrer" content="unsafe-url" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="rgb(204,232,207)" />
<meta name="author" content="王振" />
<meta name="keywords" content="聊天室,JavaWeb,websocket" />
<meta name="description"
	content="简单的Java+Websocket实现的在线聊天室，借用了教科书、前端模板网站的部分代码。" />
<title>注册</title>
<link rel="icon" type="image/png" href="images/favicon.ico">
<link rel="stylesheet" href="assets/css/bootstrap3.3.2.min.css">
<link rel="stylesheet" href="assets/css/cropper.css">
<link rel="stylesheet" media="screen" href="css/login.css">
<link rel="stylesheet" media="screen" href="css/register.css">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
	<noscript>请启用JavaScript脚本后刷新页面</noscript>
	<div class="modal fade" id="modal" tabindex="-1" role="dialog"
		aria-labelledby="modalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="modalLabel">裁剪头像</h5>
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="img-container">
						<img id="image" src="images/yellow_button.png">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary"
						data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="crop">裁剪</button>
				</div>
			</div>
		</div>
	</div>
	<div id="particles-js">
		<div class="aui-register-popup">
			<div class="aui-register-box">
				<div class="aui-register-link fr" id="aui-register-link">
					已有账号？去<a href="login.html" target="_self"><span>登录</span></a>或<a
						target="_self" href="index.jsp">匿名访问</a>
				</div>
				<div class="aui-register-logo">注册</div>
				<div class="container">
					<label class="label" data-toggle="tooltip" title="上传头像"><img
						class="rounded" id="avatar" src="portraits/client.jpg"
						alt="avatar"><input type="file" class="sr-only" tabindex="1"
						id="portrait" name="image" accept="image/*"></label>
					<div class="progress">
						<div
							class="progress-bar progress-bar-striped progress-bar-animated"
							role="progressbar" aria-valuenow="0" aria-valuemin="0"
							aria-valuemax="100">0%</div>
					</div>
					<div class="alert" role="alert"></div>
				</div>
				<div class="aui-register-form" id="verifyCheck">
					<form action="">
						<div class="aui-register-form-item">
							<input type="email" name="email" placeholder="电子邮箱"
								autocomplete="mail" class="txt01 f-r3 required" keycodes="tel"
								tabindex="2" data-valid="isNonEmpty||isEmail||hasEmail"
								data-error="<i class='icon-tips'></i>请输入邮箱||<i class='icon-tips'></i>电子邮箱格式不正确||<i class='icon-tips'></i>该邮箱已注册"
								id="email"><label class="focus valid"><div
									class="msg" style="display: none">
									<i class="icon-tips"></i>您还未输入电子邮箱号
								</div></label><span class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13 "
								id="time_box" disabled="" style="display: none;"></span><span
								class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13"
								tabindex="3" id="verifyYz">获取验证码</span>
						</div>
						<div class="aui-register-form-item">
							<input type="text" placeholder="验证码" maxlength="6"
								id="verification" class="txt02 f-r3 f-fl required" tabindex="4"
								data-valid="isNonEmpty||between:6-6"
								data-error="<i class='icon-tips'></i>请填写正确的邮箱验证码||<i class='icon-tips'></i>请填写6位邮箱验证码"><label
								class="focus valid"></label>
						</div>
						<div class="aui-register-form-item">
							<input type="text" name="username" maxlength="20"
								placeholder="昵称" class="txt03 f-r3 required" tabindex="5"
								data-valid="isNonEmpty||between:3-20||isUname"
								data-error="<i class='icon-tips'></i>您还没有输入昵称||<i class='icon-tips'></i>昵称长度3-20位||<i class='icon-tips'></i>只能输入字母、数字、且以中文或字母开头"
								id="name"><label class="focus valid"></label>
						</div>
						<div class="aui-register-form-item">
							<input type="password" name="password" placeholder="设置密码"
								id="password" maxlength="20" class="txt04 f-r3 required"
								tabindex="6" style="ime-mode: disabled;" onpaste="return  false"
								autocomplete="off"
								data-valid="isNonEmpty||between:6-16||level:2"
								data-error="<i class='icon-tips'></i>密码太短，最少6位||<i class='icon-tips'></i>密码长度6-16位||<i class='icon-tips'></i>密码太简单，有被盗风险，建议字母+数字的组合"><label
								class="focus valid"></label>
						</div>
						<div class="aui-register-form-item">
							<input type="password" name="rePassword" id="rePassword"
								placeholder="确认密码" maxlength="20" class="txt05 f-r3 required"
								tabindex="7" style="ime-mode: disabled;" onpaste="return  false"
								autocomplete="off" data-valid="isRepeat:password"
								data-error="<i class='icon-tips'></i>两次密码输入不一致"> <label
								class="focus valid"></label>
						</div>
						<div class="aui-register-form-item">
							<div class="radio-sex">
								<input type="radio" id="gender" checked name="gender"><label
									for="gender"></label><span>男</span>
							</div>
							<div class="radio-sex">
								<input type="radio" id="gender2" name="gender"><label
									for="gender2"></label> 女
							</div>
						</div>
						<div class="aui-register-form-item">
							<div class="protocol">
								<input type="checkbox" id="agree" name="agree" tabindex="8"
									class="required" data-valid="isChecked"
									data-error="<i class='icon-tips'></i>您尚未同意协议" /> 同意<a
									target="_blank" href="agreement.html">《用户使用协议》</a>和<a
									target="_blank" href="privacy.html">《隐私政策》</a>
							</div>
							<input id="aui-btn-reg" class="aui-btn-reg" placeholder=""
								tabindex="9" readonly="readonly" value="注册">
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="sk-rotating-plane"></div>
	</div>
	<script src="assets/js/jquery3.3.1.min.js"></script>
	<script src="js/register.js"></script>
	<script src="js/uploadimage.js"></script>
	<script src="assets/js/particles.min.js"></script>
	<script src="assets/js/app.js"></script>
	<script src="assets/js/bootstrap3.3.7.min.js"></script>
	<script src="js/cropper.js"></script>
</body>
</html>
